<template>
  <div>
    <button @click="abc='News'">新闻</button>
    <button @click="abc='Music'">音乐</button>
    <!-- 
      动态组件:我们可以通过components组件的is属性来决定渲染哪一个组件
        * component内置组件:渲染一个“元组件”为动态组件,依 is 的值，来决定哪个组件被渲染
        * is属性必须动态绑定,并且值是被动态加载的组件的名称
     -->
    <component :is="abc"></component>
  </div>
</template>

<script>
import News from "./components/News";
import Music from "./components/Music";
export default {
  name: "App",
  components:{
    Music,
    News
  },
  data() {
    return {
      abc:""
    }
  },
};
</script>

<style></style>